// src/app/workspace/_components/workspace-header.tsx
import React, {useState} from 'react';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import {Button} from "@/components/ui/button";
import {Workspace} from "@/lib/social/types";
import {ChevronDown, ListFilter, SquarePen} from "lucide-react";
import Hint from "@/components/social/hint";
import PreferencesModal from "@/app/social/workspace/[workspaceId]/_components/preferences-modal";
import InviteModal from "@/app/social/workspace/[workspaceId]/_components/invite-modal";

const WorkspaceHeader = ({workspace, isAdmin}: { workspace: Workspace, isAdmin: boolean }) => {
    const [preferencesOpen, setPreferencesOpen] = useState(false);
    const [inviteOpen, setInviteOpen] = useState(false);

    return (
        <>
            <InviteModal
                open={inviteOpen}
                setOpen={setInviteOpen}
                name={workspace.name}
                joinCode={workspace.joinCode}
            />
            <PreferencesModal
                open={preferencesOpen}
                setOpen={setPreferencesOpen}
                initialValue={workspace.name}/>
            <div className={`flex items-center justify-between px-4 h-[49px] gap-0.5`}>
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button
                            size={'sm'}
                            variant={'transparent'}
                            className={'font-semibold text-lg w-auto p-1.5 overflow-hidden'}
                        >
                            <span className={`truncate`}>{workspace?.name}</span>
                            <ChevronDown className={`size-4 ml-1 shrink-0`}/>
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent side={'bottom'} align={'start'} className={`w-64`}>
                        <DropdownMenuItem
                            className={`cursor-pointer capitalize`}
                        >
                            <div className={`size-9 relative overflow-hidden bg-[#616061] text-white
                        font-semibold text-xl rounded-md flex items-center justify-center mr-2`}>
                                {workspace.name.charAt(0).toUpperCase()}
                            </div>
                            <div className={`flex flex-col items-start`}>
                                <p className={`font-bold`}>{workspace.name}</p>
                                <p className={`text-xs text-muted-foreground`}>Active workspace</p>
                            </div>
                        </DropdownMenuItem>
                        {isAdmin && (
                            <>
                                <DropdownMenuSeparator/>
                                <DropdownMenuItem
                                    className={`cursor-pointer p-2`}
                                    onClick={() => setInviteOpen(true)}
                                >
                                    Invite people to {workspace.name}
                                </DropdownMenuItem>
                                <DropdownMenuSeparator/>
                                <DropdownMenuItem
                                    className={`cursor-pointer p-2`}
                                    onClick={() => setPreferencesOpen(true)}
                                >
                                    Preferences
                                </DropdownMenuItem>
                            </>
                        )}
                    </DropdownMenuContent>
                </DropdownMenu>
                <div className={`flex items-center gap-0.5`}>
                    <Hint label={'Filter conversations'} side={'bottom'}>
                        <Button variant={'transparent'} size={`iconSm`}>
                            <ListFilter className={`size-4`}/>
                        </Button>
                    </Hint>
                    <Hint label={'New Message'} side={'bottom'}>
                        <Button variant={'transparent'} size={`iconSm`}>
                            <SquarePen className={`size-4`}/>
                        </Button>
                    </Hint>
                </div>
            </div>
        </>
    );
};

export default WorkspaceHeader;